<template>
  <div>
    <el-card class="card-container">
      <el-row>
        <el-col :span="1"></el-col>
        <el-col :span="6">报销单基本信息</el-col>
      </el-row>
      <el-row>
        <baseTable :summaryInfo="detailInfo.summaryInfo"></baseTable>
      </el-row>
      <reiTable
        :travelList="detailInfo.detailInfo"
        :applyType="detailInfo.summaryInfo.billType"
      ></reiTable>
    </el-card>
    <el-card class="card-container">
      <el-row>
        <el-col :span="1"></el-col>
        <el-col :span="6">流程轨迹信息</el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-table :data="detailInfo.trajectoryInfo" border style="width: 100%">
          <el-table-column
            prop="approvalName"
            label="审批人姓名"
          ></el-table-column>
          <el-table-column
            prop="approvalEmail"
            label="审批人邮件"
            width="200"
          ></el-table-column>
          <el-table-column prop="approvalStatus" label="审批状态">
          </el-table-column>
          <el-table-column
            prop="approvalResult"
            label="审批意见"
          ></el-table-column>
          <el-table-column prop="startTime" label="启动时间"></el-table-column>
          <el-table-column
            prop="completeTime"
            label="完成时间"
          ></el-table-column>
        </el-table>
      </el-row>
    </el-card>

    <el-card class="card-container">
      <el-form
        ref="formData"
        label-width="100px"
        class="demo-dynamic"
      >
        <el-form-item label="当前审批人">
          <span>{{ user.nickName }}</span>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in formData"
          :label="domain.controlLable"
          :key="index"
        >
          <el-radio-group
            v-model="domain.controlValue"
            v-if="'radio' == domain.controlType"
          >
            <el-radio
              v-for="(defaults, indexd) in domain.controlDefault.split(
                '--__--'
              )"
              :label="indexd"
              :key="indexd"
              >{{ defaults }}
            </el-radio>
          </el-radio-group>
          <el-input
            type="textarea"
            v-model="domain.controlValue"
            v-if="'textarea' == domain.controlType"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- <el-row style="margin-top: 10px">
        <el-col :span="8" class="bottomCard-left">审批意见</el-col>
        <el-col :span="16">
          <el-radio v-model="radio" label="1">同意</el-radio>
          <el-radio v-model="radio" label="2">不同意</el-radio>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col
          :span="8"
          class="bottomCard-left"
          style="height: 36px; line-height: 36px"
          >备注</el-col
        >
        <el-col :span="16">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-col>
      </el-row> -->
    </el-card>

    <el-row style="margin-top: 20px; margin-bottom: 20px">
      <div style="display: inline-block; width: 100%">
        <el-button
          class="back-btn-l"
          size="medium"
          type="primary"
          @click="submitForm"
          >确认</el-button
        >
        <el-button
          class="back-btn-r"
          size="medium"
          type="primary"
          @click="clickBack"
          plain
          >返回</el-button
        >
      </div>
    </el-row>
  </div>
</template>

<script>
  import {reiDetail} from "@/api/done/done";
  import reiTable from "./components/reiDetailTabel.vue";
  import baseTable from "./components/baseInfoTable.vue";
  import {formDataSave, formDataShow} from "@/api/activiti/task";
  import {getUserProfile} from "@/api/system/user";

  export default {
  name: "",
  props: [""],
  data() {
    return {
      rId: null,
      taskId: null,
      detailInfo: {
        summaryInfo: {
          billType: null,
        },
      },
      radio: 1,
      input: null,
      applyType: 1,
      formData: null,
      user: {
        nickName: null,
      },
    };
  },

  components: {
    reiTable,
    baseTable,
  },

  computed: {},

  beforeMount() {},

  mounted() {
    this.rId = this.$route.query.rId;
    this.taskId = this.$route.query.taskId;
    this.getDetailInfo();
    this.getFormData();
    this.getUser();
  },

  methods: {
    getUser() {
      getUserProfile().then((response) => {
        this.user = response.data;
      });
    },
    getDetailInfo() {
      this.loading = true;
      let that = this;
      reiDetail(this.rId).then((response) => {
        that.detailInfo = response.data;
        that.detailInfo.trajectoryInfo.forEach((e) => {
          if (e.startTime.length > 0) {
            let startTimeArr = e.startTime.split("T");
            e.startTime = startTimeArr[0];
          }
          if (e.completeTime && e.completeTime.length > 0) {
            let endTimeArr = e.completeTime.split("T");
            e.completeTime = endTimeArr[0];
          }
        });
        that.loading = false;
      });
    },
    getFormData() {
      formDataShow(this.taskId).then((response) => {
        // FormProperty_3qipis2--__!!radio--__!!审批意见--__!!i--__!!同意--__--不同意
        // FormProperty_0lffpcm--__!!textarea--__!!批注--__!!f--__!!null
        let datas = response.data;
        let formData = [];
        for (let i = 0; i < datas.length; i++) {
          let strings = datas[i].split("--__!!");
          let controlValue = null;
          let controlDefault = null;
          switch (strings[1]) {
            case "radio":
              controlValue = 0;
              controlDefault = strings[4];
              break;
            // default:
          }
          formData.push({
            controlId: strings[0],
            controlType: strings[1],
            controlLable: strings[2],
            controlIsParam: strings[3],
            controlValue: controlValue,
            controlDefault: controlDefault,
          });
        }
        this.formData = formData;
      });
    },
    /** 提交按钮 */
    submitForm() {
      let radioIndex = 0;
      let note = null;
      this.formData.forEach((e) => {
        if (e.controlType == "radio") {
          radioIndex = e.controlValue;
        } else if (e.controlType == "textarea") {
          note = e.controlValue;
        }
      });
      if (radioIndex == 1 && note == null) {
         this.$message({
          message: '请输入批注',
          type: 'warning'
        });
        return;
      }
      formDataSave(this.taskId, this.formData).then((response) => {
        this.msgSuccess("审批成功");
        this.clickBack();
      });
    },
    clickBack() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.replace("/task/task");
    },
  },

  watch: {},
};
</script>
<style lang='scss' scoped>
.card-container {
  width: 80%;
  margin-top: 20px;
  margin-left: 10%;
}

table,
th,
td {
  border: 1px solid #e6ebf5;
}

table {
  border-collapse: collapse;
  margin-top: 15px;
}

.table-item {
  margin: 5px;
  color: #606266;
  font-size: 14px;
}

.back-btn-l {
  width: 100px !important;
  margin-left: calc(50% - 150px);
}

.back-btn-r {
  width: 100px !important;
  margin-left: 100px;
}

.bottomCard-left {
  text-align: end;
  padding-right: 15px;
}
</style>
